import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import css from './index.less';
import classnames from 'classnames';
import {FEED} from 'utils/feedFunc';

import classBg from 'assets/images/classBg.png';
import classClose from 'assets/images/classClose.png';
import classStart from 'assets/images/classStart.png';
import close from 'assets/images/close.png';

export default class ClassList extends React.Component {

  static propTypes = {
    itemDetail: PropTypes.array.isRequired,

  };

  static defaultProps = {

    itemDetail: [
      {
        name: '拖把系列',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '清洁工具',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '家具收纳',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '一次性用品',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '卫浴用品',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
    ],


  };


  constructor(props) {
    super(props);
    this.state = {
      showClass: false,
      selectedInd: 0,
    };

    this.itemDetail = props.itemDetail.slice(0);


  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }


  render() {

    const { showClass, selectedInd } = this.state;
    const {switchClass = () => {}} = this.props;


    const openProps = {
      className: css.classImg,
      src: classStart,
      onClick: (e) => {
        e.stopPropagation();
        FEED('');
        this.setState({
          showClass: true,
        });
      },
    };

    const closeProps = {
      className: css.closeImg,
      onClick: (e) => {
        e.stopPropagation();
        FEED('');
        this.setState({
          showClass: false,
        });
      },
    };

    return (
      <div>
        {
          !showClass ? <img {...openProps}/> :
            <div className={css.classWrapper} style={{background: `url(${classBg}) no-repeat`}}>
              <div className={css.classList}>
                {
                  this.itemDetail.map( (item, index) => {
                    // console.log('item.name', item.name.length);
                    const props = {
                      key: index,
                      className: css.title,
                      // className: classnames([css.title], [selectedInd === index && css.border]),
                      style: {
                        color: selectedInd === index ? '#ffffff' : '#e3e3e3',
                        // borderBottom: selectedInd === index ? '5px solid #ffffff' : 'none',
                      },
                      onClick: (e) => {
                        e.stopPropagation();
                        // FEED('');
                        switchClass(index, item.name);
                        this.setState({
                          selectedInd: index,
                          showClass: false,
                        });
                      },
                    };
                    return (
                      <div {...props}> {item.name}
                        <div className={css.border} style={{display: selectedInd === index ? 'block' : 'none'}}/>
                      </div>
                    );
                  })
                }
              </div>
              <div {...closeProps} />
            </div>
        }
      </div>
    );
  }
}
